<template>
  <div class="edit-address">
    <div class="content">
      <div class="box-wrapper">
        <div class="input-box">
          <van-field required label="收货人" placeholder="请输入您的姓名" v-model="form.receiverName" />
          <van-field required label="手机号" placeholder="请输入您的手机号" v-model="form.receiverPhone" />
          <van-field label="邮箱" v-model="form.receiverEmail" placeholder="请输入您的邮箱" />
          <van-field
            required
            readonly
            label="所在地区"
            v-model="addr"
            placeholder="请选择您的位置"
            @click.native="show = true"
          >
            <template slot="extra">
              <span class="icon_select">
                <i></i>
              </span>
            </template>
          </van-field>
          <!-- <van-field v-model="value" placeholder="详细地址" /> -->
          <van-field
            v-model="form.address"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请输入详情地址"
          />
        </div>
      </div>
    </div>
    <div class="btn">
      <button class="clear" @click="deleteAddr">删 除</button>
      <button class="submit" @click="submit">保 存</button>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="handleConfirm"
        :columns-placeholder="['请选择', '请选择', '请选择']"
      />
    </van-popup>
  </div>
</template>
<script>
import areaList from '@/util/area'
import { addAddressItem, editAddressItem, deleteAddressItem } from '@/api/my'
const ERR_OK = 200
export default {
  data () {
    return {
      phone: '',
      email: '',
      addr: '',
      value: '',
      areaList,
      show: false,
      form: {
        receiverName: '',
        receiverPhone: '',
        receiverEmail: '',
        address: '',
        province: '',
        city: '',
        area: ''
      }
    }
  },
  created () {
    if (this.$route.query.addr && this.$route.query.isEdit) {
      const address = JSON.parse(this.$route.query.addr)
      this.form.receiverName = address.receiver_name
      this.form.receiverPhone = address.receiver_phone
      this.form.receiverEmail = address.receiver_email
      this.form.province = address.area.split('-')[0]
      this.form.city = address.area.split('-')[1]
      this.form.area = address.area.split('-')[2]
      this.form.address = address.address
      this.addr =
        address.area.split('-')[0] +
        '/' +
        address.area.split('-')[1] +
        '/' +
        address.area.split('-')[2]
      this.form.id = address.id
    }
  },
  methods: {
    submit () {
      if (!this.form.receiverName) {
        this.$toast('请输入姓名')
      } else if (!this.form.receiverPhone) {
        this.$toast('请输入手机号码')
      } else if (!this.form.address) {
        this.$toast('请选择您的位置')
        return
      }
      if (this.$route.query.isEdit) {
        this._editAddressItem(this.form).then(res => {
          if (res.code === ERR_OK) {
            this.$toast('修改成功~')
            this.$emit('success')
            this.$router.back()
          }
        })
      } else {
        this._addAddressItem(this.form).then(res => {
          if (res.code === ERR_OK) {
            this.$toast('添加成功~')
            this.$emit('success')
            this.$router.back()
          }
        })
      }
    },
    deleteAddr () {
      const address = JSON.parse(this.$route.query.addr)
      this._deleteAddressItem(address.id).then(res => {
        if (res.code === ERR_OK) {
          this.$toast('删除成功~')
          const time = setTimeout(() => {
            this.$router.push(
              '/my/exchange-center/integral-goods/order/address-list'
            )
            this.$emit('success')
            clearTimeout(time)
          }, 1000)
        }
      })
    },
    handleConfirm (val) {
      this.show = false
      const arr = []
      val.forEach(item => {
        arr.push(item.name)
      })
      this.addr = arr.join('/')
      this.form.province = val[0].name
      this.form.city = val[1].name
      this.form.area = val[2].name
    },
    _deleteAddressItem (id) {
      return deleteAddressItem(id)
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _addAddressItem ({
      receiverName,
      receiverPhone,
      receiverEmail,
      address,
      province,
      city,
      area
    }) {
      return addAddressItem({
        receiverName,
        receiverPhone,
        receiverEmail,
        address,
        province,
        city,
        area
      })
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _editAddressItem ({
      receiverName,
      receiverPhone,
      receiverEmail,
      address,
      province,
      city,
      area,
      id
    }) {
      return editAddressItem({
        receiverName,
        receiverPhone,
        receiverEmail,
        address,
        province,
        city,
        area,
        id
      })
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.edit-address {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  touch-action: none;
  z-index: 11;
  background: #fafafa;
  .content {
    width: 100%;
    padding: 0.6rem 0.36rem;
    box-sizing: border-box;
    .box-wrapper {
      width: 100%;
      padding: 0 0.15rem 0 0.5rem;
      box-sizing: border-box;
      box-sizing: border-box;
      background: #fff;
      .input-box {
        .icon_select {
          padding: 0.1rem;
          i {
            display: inline-block;
            width: 0.12rem;
            height: 0.21rem;
            background: url("../../../assets/images/_1.png") no-repeat;
            background-size: cover;
          }
        }
        .van-cell {
          padding-left: 0;
          padding-right: 0;
          padding: 15px 0;
          &::after {
            left: 0;
          }
          &::before {
            left: -10px;
          }
        }
      }
    }
  }
  .btn {
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    button {
      width: 50%;
      height: 0.8rem;
      border: none;
      outline: none;
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 0.8rem;
      text-align: center;
    }
    .clear {
      background: rgba(233, 233, 233, 1);
      color: rgba(0, 4, 0, 1);
    }
    .submit {
      background: rgba(0, 4, 0, 1);
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
